<template>
  <view class="box">
    <!-- 抢票日期 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">抢票日期</text>
      </view>
      <view class="box__item__date">
        <view
          class="box__item__date__item"
          v-for="(item, index) in getTimeList"
          :key="index"
          :class="{ active: isActiveDate(item) }"
          @click="selectDate(item)"
        >
          <text>{{ item.day }}</text>
        </view>
      </view>
    </view>
    <!-- 抢票时段 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">抢票时段</text>
      </view>
      <view class="box__timePrame">
        <view class="box__timePrame__box" :style="listRowStyle">
          <view
            class="box__timePrame__box__item"
            v-for="(item, index) in timePrameList"
            :key="index"
            @click="selectTimeFrame(index)"
            :class="{ change: index === timeFrameIndex }"
          >
            <text>{{ item.startTime + "-" + item.endTime }}</text>
            <text style="margin-top: 15rpx">{{
              item.surplusStock <= 0
                ? "暂无余票"
                : "剩余票数：" + item.surplusStock
            }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 抢票时间 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">抢票时间</text>
      </view>
      <el-time-picker
        style="width: 100%"
        v-model="formData.predeterminedTime"
        @change="timeChange"
        value-format="HH:mm:ss"
        :picker-options="pickerOptions"
        placeholder="任意时间点"
      ></el-time-picker>
    </view>
    <!-- 导游姓名 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">导游姓名</text>
      </view>
      <uni-easyinput
        v-model="formData.name"
        placeholder="请输入导游姓名"
        :trim="true"
      ></uni-easyinput>
    </view>
    <!-- 身份证号码 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">身份证号码</text>
      </view>
      <uni-easyinput
        v-model="formData.identificationCard"
        placeholder="请输入身份证号码"
        :trim="true"
      ></uni-easyinput>
    </view>
    <!-- 联系电话 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">联系电话</text>
      </view>
      <uni-easyinput
        v-model="formData.phone"
        placeholder="请输入联系电话"
        :trim="true"
      ></uni-easyinput>
    </view>
    <!-- 上传参观名单 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">参观名单</text>
        <text @click="viewList(1)" class="box__item__list">查看参观名单</text>
      </view>
      <view class="custom-upload">
        <uv-button 
          type="primary" 
          size="small"
          @click="triggerFileInput(1)"
          :text="uploading[1] ? '上传中...' : '点击上传'"
          :disabled="uploading[1]"
        ></uv-button>
        <view v-if="uploading[1]" class="upload-progress">
          <view class="progress-bar">
            <view class="progress-fill" :style="{width: uploadProgress[1] + '%'}"></view>
          </view>
          <text class="progress-text">{{ uploadProgress[1] }}%</text>
        </view>
        <view v-if="visitingListFile && !uploading[1]" class="file-item">
          <text class="file-name">{{ visitingListFile.name }}</text>
          <text class="file-delete" @click="removeFile(1)">删除</text>
        </view>
      </view>
    </view>
    <!-- 查看参观名单 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="90%">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-show="dialogState === 1"
      >
        <el-table-column
          prop="customerName"
          label="姓名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="customerIdCard"
          label="身份证号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="customerIdCardTypeStr"
          label="证件类型"
        ></el-table-column>
        <el-table-column prop="customerPhone" label="手机号"></el-table-column>
        <el-table-column prop="productName" label="产品名称"></el-table-column>
      </el-table>
      <!-- PDF预览组件 -->
      <view class="pdf-preview-container" v-show="dialogState !== 1">
        <u-pdf
          :url="formData.itineraryUrl"
          :show-timer="false"
          :disabled="disabled"
        ></u-pdf>
      </view>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 上传行程单 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">行程单</text>
        <text @click="viewList(2)" class="box__item__list">查看行程单</text>
      </view>
      <view class="custom-upload">
        <uv-button 
          type="primary" 
          size="small"
          @click="triggerFileInput(2)"
          :text="uploading[2] ? '上传中...' : '点击上传'"
          :disabled="uploading[2]"
        ></uv-button>
        <view v-if="uploading[2]" class="upload-progress">
          <view class="progress-bar">
            <view class="progress-fill" :style="{width: uploadProgress[2] + '%'}"></view>
          </view>
          <text class="progress-text">{{ uploadProgress[2] }}%</text>
        </view>
        <view v-if="itineraryFile && !uploading[2]" class="file-item">
          <text class="file-name">{{ itineraryFile.name }}</text>
          <text class="file-delete" @click="removeFile(2)">删除</text>
        </view>
      </view>
    </view>
    <!-- 上传讲解词 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">讲解词</text>
      </view>
      <view class="custom-upload">
        <uv-button 
          type="primary" 
          size="small"
          @click="triggerFileInput(4)"
          :text="uploading[4] ? '上传中...' : '点击上传'"
          :disabled="uploading[4]"
        ></uv-button>
        <view v-if="uploading[4]" class="upload-progress">
          <view class="progress-bar">
            <view class="progress-fill" :style="{width: uploadProgress[4] + '%'}"></view>
          </view>
          <text class="progress-text">{{ uploadProgress[4] }}%</text>
        </view>
        <view v-if="epidemicProveFile && !uploading[4]" class="file-item">
          <text class="file-name">{{ epidemicProveFile.name }}</text>
          <text class="file-delete" @click="removeFile(4)">删除</text>
        </view>
      </view>
    </view>
    <!-- 上传导游证 -->
    <view class="box__item">
      <view style="margin-bottom: 30rpx">
        <text class="box__item__true">*</text>
        <text class="box__item__title">导游证</text>
      </view>
      <view class="custom-upload">
        <uv-button 
          type="primary" 
          size="small"
          @click="triggerFileInput(3)"
          :text="uploading[3] ? '上传中...' : '点击上传'"
          :disabled="uploading[3]"
        ></uv-button>
        <view v-if="uploading[3]" class="upload-progress">
          <view class="progress-bar">
            <view class="progress-fill" :style="{width: uploadProgress[3] + '%'}"></view>
          </view>
          <text class="progress-text">{{ uploadProgress[3] }}%</text>
        </view>
        <view v-if="touristCertificateFile && !uploading[3]" class="file-item">
          <image v-if="touristCertificateFile.preview" :src="touristCertificateFile.preview" class="file-preview"></image>
          <text class="file-name">{{ touristCertificateFile.name }}</text>
          <text class="file-delete" @click="removeFile(3)">删除</text>
        </view>
      </view>
    </view>

    <view style="height: 200rpx"></view>
    <view class="box__bottom">
      <uv-button type="primary" text="确定添加" @click="submit"></uv-button>
    </view>
  </view>
</template>

<script>
import { getDate, get_time_frame } from "@/api/http/robInfo.js";
import { addTask, getUserById } from "@/api/http/myNodeIndex.js";
export default {
  data() {
    return {
      headers: {
        Authorization: "",
      },
      disabled: true,
      formData: {
        predeterminedTime: "20:00:00",
        name: "",
        identificationCard: "",
        phone: "",
        visitingListUrl: null,
        itineraryUrl: null,
        touristCertificateUrl: null,
        epidemicProveFileUrl: null,
      },
      uploadIndex: 1,
      date: "",
      timeFrameIndex: 0,
      timeFrameId: 0,
      timePrameList: [],
      dialogVisible: false,
      tableData: [],
      dialogState: 1,
      dataInfo: "",
      userId: 0,
      loading: false,
      getTimeList: [],
      // 文件列表
      visitingListFile: null,
      itineraryFile: null,
      epidemicProveFile: null,
      touristCertificateFile: null,
      // 上传进度
      uploadProgress: {
        1: 0, // 参观名单
        2: 0, // 行程单
        3: 0, // 导游证
        4: 0  // 讲解词
      },
      uploading: {
        1: false,
        2: false,
        3: false,
        4: false
      }
    };
  },
  onLoad(e) {
    this.initializeUser(e.id);
  },
  computed: {
    listRowStyle() {
      return {
        "grid-template-columns": `repeat(${
          this.timePrameList.length || 2
        }, 1fr)`,
      };
    },
    pickerOptions() {
      return {
        selectableRange: "6:30:00 - 20:30:00",
      };
    },
    isFormValid() {
      const { name, identificationCard, phone } = this.formData;
      return (
        name.trim() &&
        identificationCard.trim() &&
        phone.trim() &&
        this.visitingListFile &&
        this.itineraryFile &&
        this.touristCertificateFile &&
        this.epidemicProveFile
      );
    },
  },
  methods: {
    async initializeUser(id) {
      try {
        this.userId = id;
        const res = await getUserById({
          id,
        });
        this.dataInfo = res.data;
        this.headers.Authorization = this.dataInfo.token;
        await this.init();
        uni.setNavigationBarTitle({
          title: this.dataInfo.teamName || "未绑定公司",
        });
      } catch (error) {
        this.showError("加载用户信息失败: " + error.message);
      }
    },
    async init() {
      try {
        const res = await getDate({
          type: 1,
          token: this.dataInfo.token,
        });
        if (res.code === 0) {
          this.getTimeList = res.data;

          if (this.getTimeList.length > 0) {
            let lastDateStr = this.getTimeList[this.getTimeList.length - 1].day;
            for (let i = 1; i <= 4; i++) {
              const nextDayTimestamp = vk.pubfn.getDayOffsetStartAndEnd(
                i,
                lastDateStr
              ).startTime;
              const nextDayStr = vk.pubfn.timeFormat(
                nextDayTimestamp,
                "yyyy-MM-dd"
              );
              this.getTimeList.push({ day: nextDayStr });
            }
          }

          if (this.getTimeList.length > 0 && !this.date) {
            this.date = this.getTimeList[0].day;
          } else if (this.getTimeList.length === 0) {
          }

          this.date =
            this.getTimeList.length > 0 ? this.getTimeList[0].day : "";

          if (this.date) {
            const initialDateForTimeFrame = vk.pubfn.getDayOffsetStartAndEnd(
              0,
              this.date
            ).startTime;
            await this.getTimeFrame(initialDateForTimeFrame);
          } else {
            this.timePrameList = [];
          }
        } else {
          this.showError(res.msg);
        }
      } catch (error) {
        this.showError("获取日期失败: " + error.message);
      }
    },
    async getTimeFrame(date) {
      try {
        const data = {
          orderType: 1,
          sourceType: 2,
          playDay: vk.pubfn.timeFormat(date, "yyyy-MM-dd"),
          teamType: 1,
          token: this.dataInfo.token,
        };
        const res = await get_time_frame(data);
        this.timePrameList = res.data;
        this.timeFrameId = res.data[0]?.id || 0;
      } catch (error) {
        this.showError("获取时间段失败: " + error.message);
      }
    },
    async submit() {
      if (this.loading) return;
      if (!this.isFormValid) {
        return this.showError("请填写所有必填项");
      }

      this.loading = true;
      try {
        const taskData = this.prepareTaskData();
        console.log(taskData);
        const res = await addTask({
          taskData: JSON.stringify(taskData),
          timing: this.formData.predeterminedTime,
          userId: this.dataInfo.id,
          status: 0,
        });
        if (res.code == 1) {
          uni.navigateBack({
            delta: 1,
            success: () => vk.toast("添加成功！", "none"),
          });
        } else {
          this.showError(res.msg);
        }
      } catch (error) {
        this.showError("提交失败: " + error.message);
      } finally {
        this.loading = false;
      }
    },
    prepareTaskData() {
      const { name, phone, identificationCard } = this.formData;
      return {
        data: JSON.stringify([
          {
            teamType: 1,
            merchantNo: this.dataInfo.merchantNo,
            isExplanationServiceConsultation: 0,
            contact: name,
            contactNumber: phone,
            application_file_url: this.formData.itineraryUrl,
            instructions_prove_fileUrl: this.formData.touristCertificateUrl,
            explanationFileUrl: this.formData.epidemicProveFileUrl,
            teacherExplanation: 0,
            teamAppointmentItemParamList: [
              {
                planDay: this.date,
                timeSlotId: this.timeFrameId,
                visitorInformationFileUrl: this.formData.visitingListUrl,
              },
            ],
          },
        ]),
        customerIdCard: identificationCard,
        customerIdCardType: 0,
        orderType: 1,
        sourceType: 2,
        payType: 0,
        contactNumber: phone,
        teacherExplanation: 0,
        captchaInfo: {
          captchaType: 4,
          normalCode: {
            codeValue: "",
          },
        },
      };
    },
    showError(message) {
      vk.toast(message, "none");
      return false;
    },
    selectTimeFrame(index) {
      this.timeFrameId = this.timePrameList[index].id;
      this.timeFrameIndex = index;
    },
    viewList(state) {
      this.dialogState = state;
      
      // 检查文件是否已上传
      if (state === 1) {
        if (!this.visitingListFile) {
          return this.showError("请上传参观名单");
        }
        this.dialogVisible = true;
      } else if (state === 2) {
        if (!this.itineraryFile) {
          return this.showError("请上传行程单");
        }
        let pdfUrl = this.formData.itineraryUrl;
        if (pdfUrl) {
          uni.navigateTo({
            url: `/pages/pdfLook/pdfLook?url=${encodeURIComponent(pdfUrl)}`,
          });
        } else {
          this.showError("PDF文件地址无效");
        }
      }
    },
    uploadExceed() {
      this.showError("上传失败！！请删除后再次上传");
    },
    // 删除文件
    removeFile(type) {
      switch (type) {
        case 1:
          this.visitingListFile = null;
          this.formData.visitingListUrl = null;
          this.tableData = [];
          break;
        case 2:
          this.itineraryFile = null;
          this.formData.itineraryUrl = null;
          break;
        case 3:
          this.touristCertificateFile = null;
          this.formData.touristCertificateUrl = null;
          break;
        case 4:
          this.epidemicProveFile = null;
          this.formData.epidemicProveFileUrl = null;
          break;
      }
      vk.toast("文件删除成功", "none");
    },
    
    // 触发文件输入
     triggerFileInput(type) {
       // 使用 uni-app 的方式来选择文件
       const typeMap = {
         1: { type: 1, accept: '.xlsx,.xls' }, // 参观名单
         2: { type: 2, accept: '.pdf' }, // 行程单
         3: { type: 3, accept: '.png,.jpg,.jpeg,.gif' }, // 导游证
         4: { type: 4, accept: '.doc,.docx,.pdf' } // 讲解词
       };
       
       const config = typeMap[type];
       if (!config) return;
       
       // 使用 uni.chooseFile API
       uni.chooseFile({
         count: 1,
         extension: config.accept.split(',').map(ext => ext.replace('.', '')),
         success: (res) => {
           const tempFile = res.tempFiles[0];
           if (tempFile) {
             // 创建适配的文件对象
             const adaptedFile = {
               name: tempFile.name,
               size: tempFile.size,
               type: tempFile.type || this.getFileType(tempFile.name),
               path: tempFile.path,
               tempFilePath: tempFile.path
             };
             // 创建模拟的 event 对象
             const mockEvent = {
               target: {
                 files: [adaptedFile]
               }
             };
             this.handleFileSelect(mockEvent, config.type);
           }
         },
         fail: (err) => {
           console.log('选择文件失败:', err);
         }
       });
     },
     
     // 根据文件名获取文件类型
     getFileType(fileName) {
       const ext = fileName.split('.').pop().toLowerCase();
       const typeMap = {
         'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
         'pdf': 'application/pdf',
         'doc': 'application/msword',
         'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
         'png': 'image/png',
         'jpg': 'image/jpeg',
         'jpeg': 'image/jpeg'
       };
       return typeMap[ext] || 'application/octet-stream';
     },
     
     // 处理文件选择
      handleFileSelect(event, type) {
      const file = event.target.files[0];
      if (!file) return;
      
      // 创建文件对象
      const fileObj = {
        name: file.name,
        size: file.size,
        type: file.type,
        file: file
      };
      
      // 如果是图片，创建预览
      if (type === 3 && file.type && file.type.startsWith('image/')) {
        // 在uni-app中，使用文件路径作为预览
        if (file.path || file.tempFilePath) {
          fileObj.preview = file.path || file.tempFilePath;
          this.setFileByType(type, fileObj);
        } else {
          // 如果是标准的File对象（浏览器环境）
          const reader = new FileReader();
          reader.onload = (e) => {
            fileObj.preview = e.target.result;
            this.setFileByType(type, fileObj);
          };
          reader.readAsDataURL(file);
        }
      } else {
        this.setFileByType(type, fileObj);
      }
      
      // 自动上传
      this.uploadFile(fileObj, type);
    },
    
    // 根据类型设置文件
    setFileByType(type, fileObj) {
      switch (type) {
        case 1:
          this.visitingListFile = fileObj;
          break;
        case 2:
          this.itineraryFile = fileObj;
          break;
        case 3:
          this.touristCertificateFile = fileObj;
          break;
        case 4:
          this.epidemicProveFile = fileObj;
          break;
      }
    },
    
    // 上传文件
    async uploadFile(fileObj, type) {
      let url = '';
      let formData = {};
      
      if (type === 1) {
        url = 'https://ticket.sxd.cn/api-api/app/clientHelper/uploadUserInfo';
        formData = { teamType: '1' };
      } else {
        url = 'https://ticket.sxd.cn/api-cms/file/upload';
      }
      
      // 设置上传状态
      this.uploading[type] = true;
      this.uploadProgress[type] = 0;
      
      try {
        const response = await new Promise((resolve, reject) => {
          const uploadTask = uni.uploadFile({
            url: url,
            filePath: fileObj.file.path || fileObj.file.tempFilePath,
            name: 'file',
            formData: formData,
            header: {
              'Authorization': this.headers.Authorization
            },
            success: (res) => {
              this.uploading[type] = false;
              this.uploadProgress[type] = 100;
              try {
                const data = JSON.parse(res.data);
                resolve({ data });
              } catch (e) {
                resolve({ data: res.data });
              }
            },
            fail: (err) => {
              this.uploading[type] = false;
              this.uploadProgress[type] = 0;
              reject(err);
            }
          });
          
          // 监听上传进度
          uploadTask.onProgressUpdate((res) => {
            this.uploadProgress[type] = res.progress;
          });
        });
        
        if (response.data.code === 200 || response.data.code === 0) {
          fileObj.url = response.data.data || response.data.resPath || response.data.url;
          this.handleUploadSuccess(response.data, type);
        } else {
          this.uploading[type] = false;
          this.uploadProgress[type] = 0;
          uni.showToast({
            title: response.data.msg || '上传失败',
            icon: 'error'
          });
          this.removeFile(type);
        }
      } catch (error) {
        this.uploading[type] = false;
        this.uploadProgress[type] = 0;
        console.error('上传失败:', error);
        uni.showToast({
          title: '上传失败',
          icon: 'error'
        });
        this.removeFile(type);
      }
    },
    uploadSuccess(res) {
      if (res.code === 0) {
        this.handleUploadSuccess(res);
      } else {
        this.showError(res.msg);
        this.clearFiles();
      }
    },
    // 上传成功处理
    handleUploadSuccess(response, type) {
      vk.toast("上传成功！！", "none");
      
      const uploadMap = {
        1: "visitingListUrl",
        2: "itineraryUrl",
        3: "touristCertificateUrl",
        4: "epidemicProveFileUrl",
      };

      if (type === 1) {
        this.tableData = response.data;
      }

      if (uploadMap[type]) {
        this.formData[uploadMap[type]] = response.resPath || response.data;
      }
      
      // 如果是导游证图片，更新预览链接
      if (type === 3 && response.resPath) {
        const fileObj = this.touristCertificateFile;
        if (fileObj) {
          fileObj.preview = response.resPath;
          this.touristCertificateFile = { ...fileObj };
        }
      }
    },
    clearFiles() {
      // 重置所有文件对象
      this.visitingListFile = null;
      this.itineraryFile = null;
      this.touristCertificateFile = null;
      this.epidemicProveFile = null;
      
      // 重置表单中的文件URL
      this.formData.visitingListUrl = null;
      this.formData.itineraryUrl = null;
      this.formData.touristCertificateUrl = null;
      this.formData.epidemicProveFileUrl = null;
      
      // 重置上传进度
      this.uploadProgress = { 1: 0, 2: 0, 3: 0, 4: 0 };
      this.uploading = { 1: false, 2: false, 3: false, 4: false };
    },
    setUploadIndex(index) {
      this.uploadIndex = index;
    },
    isActiveDate(item) {
      return item.day == this.date;
    },
    async selectDate(item) {
      this.date = item.day;
      const selectedDateValue = vk.pubfn.getDayOffsetStartAndEnd(
        0,
        item.day
      ).startTime;
      await this.getTimeFrame(selectedDateValue);
      this.timeFrameIndex = 0;
    },
    openPdfInBrowser() {
      if (!this.formData.itineraryUrl) {
        return this.showError("PDF文件地址无效");
      }

      let pdfUrl = this.formData.itineraryUrl;
      if (!pdfUrl.startsWith("http")) {
        pdfUrl =
          "https://ticket.sxd.cn" +
          (pdfUrl.startsWith("/") ? "" : "/") +
          pdfUrl;
      }

      window.open(pdfUrl, "_blank");
    },
    downloadPdf() {
      if (!this.formData.itineraryUrl) {
        return this.showError("PDF文件地址无效");
      }

      let pdfUrl = this.formData.itineraryUrl;
      if (!pdfUrl.startsWith("http")) {
        pdfUrl =
          "https://ticket.sxd.cn" +
          (pdfUrl.startsWith("/") ? "" : "/") +
          pdfUrl;
      }

      const a = document.createElement("a");
      a.style.display = "none";
      a.href = pdfUrl;
      a.download = "行程单.pdf";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    timeChange(time) {
      console.log("选择的时间:", time);
      this.formData.predeterminedTime = time;
    },
    getPdfFilename(url) {
      if (!url) return "";

      let filename = url.split("/").pop();
      if (filename.includes("?")) {
        filename = filename.split("?")[0];
      }

      return filename;
    },
    formatPdfUrl(url) {
      if (!url) return "";

      let formattedUrl = url;
      if (!url.startsWith("http")) {
        formattedUrl =
          "https://ticket.sxd.cn" + (url.startsWith("/") ? "" : "/") + url;
      }

      return formattedUrl;
    },
  },
};
</script>

<style lang="scss">
@import '../../uni.scss';

.box {
  &__item {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;

    &__true {
      color: red;
    }

    &__list {
      font-size: 28rpx;
      color: $uni-theme-color;
      margin-left: 20rpx;
      text-decoration: underline;
      cursor: pointer;
      transition: opacity 0.3s;

      &:hover {
        opacity: 0.8;
      }
    }

    &__title {
      font-size: 28rpx;
      color: #333;
    }

    &__date {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;

      &__item {
        padding: 15rpx 25rpx;
        border: 1px solid #eee;
        border-radius: 8rpx;
        font-size: 26rpx;
        color: #555;
        background-color: #f9f9f9;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background-color: $uni-theme-color;
          color: #fff;
          border-color: $uni-theme-color;
          transform: translateY(-2rpx);
          box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
        }

        &.active {
          background-color: $uni-theme-color;
          color: #fff;
          border-color: $uni-theme-color;
        }
      }
    }
  }

  &__bottom {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    position: fixed;
    justify-content: space-around;
    bottom: 0;
    width: 100%;
    padding: 20rpx;
    left: 0;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  }

  &__timePrame {
    width: 100%;
    display: flex;
    flex-direction: column;

    &__box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      padding: 20rpx;

      &__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 20rpx;
        border-radius: 10rpx;
        border: 2rpx solid $uni-theme-color;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          transform: translateY(-2rpx);
          box-shadow: 0 4rpx 12rpx rgba($uni-theme-color, 0.2);
        }
      }
    }
  }
}

.change {
  color: #fff;
  background-color: $uni-theme-color;
}

.pdf-container {
  margin-top: 20rpx;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;

  .pdf-actions {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20rpx;

    .el-button {
      padding: 10rpx 20rpx;
    }
  }

  .pdf-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;

    .uni-icons {
      margin-bottom: 10rpx;
    }
  }
}

.pdf-preview-container {
  margin-top: 20rpx;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  height: 600rpx;
  display: flex;
  flex-direction: column;

  .pdf-viewer {
    width: 100%;
    height: 500rpx;
    flex: 1;
  }

  .pdf-fallback-options {
    margin-top: 20rpx;
    text-align: center;

    .pdf-fallback-buttons {
      margin-top: 10rpx;
      display: flex;
      justify-content: center;
      gap: 20rpx;
    }
  }

  .pdf-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;

    .uni-icons {
      margin-bottom: 10rpx;
    }
  }
}
.custom-upload {
  margin-top: 20rpx;
}

.file-item {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  border: 1px solid #e0e0e0;
}

.file-preview {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
  border-radius: 4rpx;
}

.file-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
  word-break: break-all;
}

.file-delete {
  color: #ff4757;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  background-color: #fff;
  border: 1px solid #ff4757;
  border-radius: 4rpx;
  cursor: pointer;
}

.file-delete:hover {
  background-color: #ff4757;
  color: #fff;
}

.upload-progress {
  margin-top: 20rpx;
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 8rpx;
  background-color: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #45a049);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
  display: block;
}

</style>
